<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<%@ include file="/pages/inc/taglibs.jsp"%>

</head>
<body>
	<div class="container filter">
		<div class="row">
			<input type="text" class="selectfilter" placeholder="项目名称" id="projectName"> <input
				type="text" class="selectfilter" placeholder="项目编号" id="projectNo"> <select
				class="selectfilter" id="endFlag">
				<option value="0">全部</option>
				<option value="1">已结束</option>
				<option value="2">未结束</option>

			</select>
			<button type="button" class="btn btn-primary addproject"
				data-toggle="modal" data-target="#addmodal">+ 增加项目</button>
			<div>
				<button type="button" onclick="query()"
					class="btn btn-primary filterbutton">搜索</button>
			</div>
		</div>
	</div>

	<!-- project section -->
	<div id="projectListView">
		<div class="projectsection">
			<c-rt:forEach items="${projectList}" var="project">
				<div class="panel-group project container" id="accordion${project.projectNo}"
					role="tablist" aria-multiselectable="true">
					<div class="panel panel-default">
						<div class="panel-heading" role="tab">
							<h3 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion${project.projectNo}"
									href="#collapseOne${project.projectNo}">${project.projectName}</a> <a href="#"
									class="edit"><img src="images/edit.png" class="editicon"></a>
							</h3>
						</div>
						<div id="collapseOne${project.projectNo}" class="panel-collapse collapse">
							<div class="panel-body">
								<h4>编号：${project.projectNo}</h4>
								<h4>${project.startDate}——${project.endDate}</h4>
								<h4>${project.flag}${project.expensingOrCapital}</h4>
								<p>${project.content}</p>
								<button type="button" class="btn btn-primary delete" onclick="deleteProject('${project.id}')">删除</button>
							</div>
						</div>
					</div>

				</div>

			</c-rt:forEach>
			<div class="pagination container">
				<ul class="pagination text-center">
					<li><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
			</div>


		</div>
	</div>


	<!-- addproject modal -->
	<div id="addmodal" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="container newproject">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">增加项目</h4>
					</div>
					<div class="modal-body">
						<form id="installationForm" class="form-horizontal">


							<div class="tab-content">
								<!-- First tab -->
								<div class="tab-pane active" id="basic-tab">
									<div class="form-group">
										<div>
											<label for="projectname">项目编号：</label>
										</div>
										<div class="col-xs-10">
											<input type="text" class="form-control" id="pNo">
										</div>
									</div>
									<div class="form-group">
										<div>
											<label for="projectname">项目名称：</label>
										</div>
										<div class="col-xs-10">
											<input type="text" class="form-control" id="pName">
										</div>
									</div>
									<div class="form-group">
										<div>
											<label for="startdate">开始日期:</label>
										</div>
										<div class="col-xs-10">
											<input type="date" id="startdate">
										</div>
									</div>

									<div class="form-group">
										<div>
											<label for="enddate">计划结束日期：</label>
										</div>
										<div class="col-xs-10">
											<input type="date" id="enddate">

										</div>
									</div>

									<div class="form-group">
										<div>
											<label for="actualenddate">实际结束日期:</label>
										</div>
										<div class="col-xs-10">
											<input type="date" id="actualenddate">
										</div>
									</div>
								</div>

								<!-- Second tab -->
								<div class="tab-pane" id="database-tab">
									<div class="form-group">
										<div>
											<label for="types">类型:</label>
										</div>
										<div class="col-xs-6">
											<select class="form-control" id="types">
												<option value="1">自主</option>
												<option value="2">委托</option>
												<option value="3">合作</option>
												<option value="4">集中</option>
											</select>
										</div>
									</div>

									<div class="form-group">
										<div>
											<label for="spending">费用化/资本化:</label>
										</div>
										<div class="col-xs-6">
											<select class="form-control" id ="spending">
												<option value="1">费用化</option>
												<option value="2">资本化</option>
											</select>
										</div>
									</div>

									<div class="form-group">
										<div>
											<label for="budget">预算:</label>
										</div>
										<div class="col-xs-10">
											<input type="text" class="form-control" id="budget" />
										</div>
									</div>

									<div class="form-group">
										<div>
											<label for="comment">项目说明:</label>
										</div>
										<div class="col-xs-10">
											<input type="text" class="form-control" id="comment" />
										</div>
									</div>
								</div>

								<!-- Previous/Next buttons -->
								<ul class="pager wizard">
									<li class="previous"><a href="#basic-tab"
										class="glyphicon glyphicon-chevron-left" data-toggle="tab"></a></li>
									<li class="next"><a href="#database-tab"
										class="glyphicon glyphicon-chevron-right" data-toggle="tab"></a></li>
								</ul>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" onclick="saveProject()">提交</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					</div>
				</div>

			</div>
		</div>

	</div>
	
	<script type="text/javascript">
		function query() {
			var projectName = $("#projectName").val();
			var projectNo = $("#projectNo").val();
			var endFlag = $("#endFlag").val();
			$.ajax({
				url : "<c:url value='/company/project/queryProjectList' />",
				data : {
					projectName : projectName,
					projectNo : projectNo,
					endFlag : endFlag
				},
				type : 'POST',
				dataType : 'html',
				success : function(data) {
					$("#projectListView").html("");
					$("#projectListView").html(data);
				},
				error : function(data) {
					alert("error");
				}
			});			
		}
		
		function deleteProject(id) {
			var json = {};
			json.ids = id;
			$.ajax({
				url : "<c:url value='/company/project/delete' />",
				data : {
					id : id
				},
				type : 'POST',
				dataType : "json",
				data : json, 
				success : function(data) {
					query();
				},
				error : function(data) {
					alert("error");
				}
			});
		}
		
		function saveProject() {
			var json = {};
			json.projectNo = $("#pNo").val();
			json.projectName = $("#pName").val();
			json.startDate = $("#startdate").val();
			json.planEndDate = $("#enddate").val();
			json.endDate = $("#actualenddate").val();
			json.flag = $("#types").val();
			json.expensingOrCapital = $("#spending").val();
			json.budget = $("#budget").val();
			json.content = $("#comment").val();
			
			$.ajax({
				url : "<c:url value='/company/project/add' />",
				type : 'POST',
				dataType : 'json',
				data : json, 
				success : function(data) {
					query();
				},
				error : function(data) {
					alert("error");
				}
			});
		}
	
	</script>
</body>
</html>